<template>
	<view class="content">
		<view class="manager">
			<view class="checkbox-all">
				<custom-checkbox class="checkbox-img" label="全选" @checkValue="checkValue"
					ref="checkMode"></custom-checkbox>
			</view>
			<view>
				<view class="con-btn">{{editorMode===false?"编辑":"完成"}}</view>
			</view>
		</view>
		<view class="order-item" v-for="item in procureList" :key="item.id" >
			<custom-checkbox class="checkbox-img" ref="group" @change="checkboxChange" :value="item.label"></custom-checkbox>
	<!-- 		<checkbox-group @change="checkboxChange">
				<label>
					<view>
						
						<checkbox :value="item.id" :checked="item.checked" style="display: none;" />
					</view>

				</label>
			</checkbox-group> -->
			<image class="goods-img"></image>
			<view class="order-describe">
			
			</view>
		</view>
		
		
<!-- 		<view v-for="i in l">
			<custom :v="i.value" @fun="fFun"></custom>
		</view> -->
		
	</view>
</template>

<script>
	import procureJson from "../../static/procure.json"
	export default {
		data() {
			return {
				// checkAll: false,
				editorMode: false,
				procureList: procureJson
			}
		},
		methods: {
			checkboxChange(e) {
				console.log("e",e)
				// if (e.detail.value.length < this.$refs.group.length) {
				// 	console.log("No", e.detail.value)
				// 	this.$refs.checkMode.childMethod(false);
				// } else {
				// 	console.log("Yes", e.detail.value)
				// 	this.$refs.checkMode.childMethod(true);
				// }

			},
			checkValue(value) {
				let childL = this.$refs.group.length;
				for (let i = 0; i < childL; i++) {
					const group = this.$refs.group[i];
					group.childMethod(value);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		padding: 10rpx 35rpx;
		background-color: #e9e9e9;

		.manager {
			// background-color: #ffffff;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15rpx;
			padding-bottom: 10rpx;

			.con-btn {
				font-size: 28rpx;
				font-weight: 600;
				color: #252525;
			}
		}

		.order-item {
			display: flex;
			align-items: center;
			padding: 15rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			.goods-img {
				width: 100rpx;
				height: 100rpx;
				background-color: #bfbfbf;
				border-radius: 10rpx;
			}
		}

	}
</style>